<template>
	<view :class="list && list.length>0?'u-page':'base-page'" style="background-color: #F3F4F6;">
		<view v-if="list && list.length>0" class="yangsf-padding-20 yangsf-flex-col-center" style="">
			<u-list>

				<u-list-item class="card_white yangsf-ratio-w-100 yangsf-m-b-20 " v-for="(item,index) in list"
					:key="index">
					<view class="">
						<view class="card_title">
							<view class="">
								<span>
									<template
										v-if="(item.kind == 1 && loginId == item.createId) || (item.kind == 0 && loginId != item.createId)">
										<!-- 当前用户是出借方，显示借款人 -->
										借款人：<span style="color: #6c6c6c;">{{ item.debtor }}</span>
									</template>
									<template v-else>
										<!-- 当前用户是借款方，显示出借人 -->
										出借人：<span style="color: #6c6c6c;">{{ item.creditor }}</span>
									</template>
								</span>
							</view>
							<view class="yangsf-flex-row-center" @click="setHide(index)">
								<!-- <view class="yangsf-m-r-20">
									<u-icon v-if="!item.isHide" name="/static/icon/eye.png" size="24"></u-icon>
									<u-icon v-else name="/static/icon/eye-off.png" size="24"></u-icon>
								</view> -->
								<view class="">
									<u-tag v-if="item.contractStatus==2" text="待签署" plain size="mini"
										type="warning"></u-tag>
									<!-- <u-tag v-if="item.contractStatus==2" text="已发起" plain size="mini"
										type="primary"></u-tag> -->
									<view v-if="item.contractStatus==3">
										<u-tag
											v-if="(item.kind == 1 && loginId == item.createId) || (item.kind == 0 && loginId != item.createId)"
											text="待Ta履约" plain size="mini" type="success"></u-tag>
										<u-tag v-else text="待我履约" plain size="mini" type="success"></u-tag>
									</view>
									<u-tag v-if="item.contractStatus==4" text="已逾期" plain size="mini"
										type="error"></u-tag>
									<u-tag v-if="item.contractStatus==5" text="已完结" plain size="mini"
										type="info"></u-tag>
								</view>
							</view>
						</view>
						<u-line></u-line>
						<view class="card_content" @click="click(item.signNo)">
							<view class="yangsf-flex">
								<view class="" style="color: #202020;font-size: 32rpx;font-weight: 400;">
									{{item.isHide?"***":item.totalMoney}}
									<span v-if="item.contractStatus==4 || item.contractStatus==3" class="yangsf-m-l-20"
										:style="{'font-size': '12px', 'color': calculateDateStatus(item.repayment).includes('逾期') ? '#f56c6c' : '#5ac725'}">
										{{ calculateDateStatus(item.repayment) }}
									</span>
								</view>
							</view>
							<view class="yangsf-flex yangsf-m-t-5">
								<view class="">
									利率
								</view>
								<view class="yangsf-m-l-20">
									{{item.isHide?"**":item.moneyRate}}%
								</view>
							</view>
							<view class="yangsf-flex yangsf-m-t-5">
								<view class="yangsf-ratio-w-100 yangsf-flex yangsf-flex-justify-content-space-between">
									<view class="yangsf-flex">
										<view class="">
											合同金额
										</view>
										<view class="yangsf-m-l-20">
											{{item.isHide?"***":item.money}}
										</view>
									</view>
									<view class="">
										{{$u.timeFormat(item.createTime, 'yyyy/mm/dd')}}
										-
										{{$u.timeFormat(item.repayment, 'yyyy/mm/dd')}}
									</view>
								</view>

							</view>


						</view>
					</view>
				</u-list-item>

			</u-list>
		</view>
		<u-empty v-else mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
		</u-empty>
	</view>
</template>

<script>
	import {
		getEginList
	} from '@/config/api.js'
	export default {
		data() {
			return {
				loginId: this.$store.state.userInfo.userId,
				params: {
					pageNumber: 1,
					keyword: '',
					status: '',
				},
				calculateDateStatus(repaymentDate) {
					const today = new Date();
					const repay = new Date(repaymentDate);
					const diffTime = repay.getTime() - today.getTime();
					const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

					if (diffDays < 0) {
						return `已逾期 ${Math.abs(diffDays)} 天`;
					} else if (diffDays == 0) {
						return `今日到期`;
					} else {
						return `还剩 ${diffDays} 天`;
					}
				},
				tabs: [{
					name: '全部',
					value: ''
				}, {
					name: '待签署',
					value: '2'
				}, {
					name: '履约中',
					value: '3'
				}, {
					name: '已逾期',
					value: '4'
				}, {
					name: '已完结',
					value: '5'
				}],
				list: []
			}
		},
		onLoad(option) {
			this.getList()
		},
		methods: {
			getList() {
				getEginList(this.params).then(res => {
					this.list = res.data.records
				})
			},
			click(id, e) {
				console.log("点击查看详情 ==> {},{}", id, e);
				uni.$u.route('/pages/contract/share?id=' + id);
			},
		}
	}
</script>

<style scoped>
	.card_title {
		padding: 20rpx 20rpx 10rpx 20rpx;
		font-weight: 400;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}


	.card_content {
		padding: 10rpx 20px 20rpx 40rpx;
		font-size: 28rpx;
		color: #6c6c6c;
	}

	.search-tabs {
		background-color: #fff;
		width: 90%;
		height: 60px;

		display: flex;
		align-items: center;
	}
</style>